<style lang="less" scoped>
@import "../assets/css/config.less";
.button{
  line-height: 32px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 13px;
  width: 60px;
  margin: 10px 0px;
  letter-spacing: 2px;
  outline: none;
  border: none;
  cursor: pointer;
}
.button:hover{
  background-color: @color2;
}

.button:active{
  background-color: @color3;
}
.editor{
  font-size: 16px; 
  text-align:left;
  background-color: white;
  width:100%;
  word-break: break-all;
  word-wrap: break-word;
}
</style>

<template>
  <div style="width:100%">
    <div ref="editor"  class="editor"></div>
    <button 
      class="button"
      @click="submitAnswer"
    >提交</button>
    <div v-if="done">
      <el-button
        type="success"
        icon="el-icon-check"
        circle
        size="mini"
        class="right_no"
      ></el-button>
      <div>
        <div>
          <span style="font-weight:600">正确答案：</span>
          言之有理即可
        </div>
      </div>
     
      <span style="font-weight:600">解析：</span>
      言之有理即可
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import { get_onePoint } from  "../api/api";
export default {
  name: 'myeditor',
  data(){
    return{
      editorContent: '',
      done: false
      // showFlag: false
    }
  },
  props: ['pointId', 'quesId'],
  mounted() {
    var editor = new E(this.$refs.editor);
    editor.customConfig.onchange = html => {
        this.editorContent = html;
    };
    var url = "";
    if (process.env.NODE_ENV === "development") {
        url = "http://localhost:8080/api/uploadImg";
    } else if (process.env.NODE_ENV === "production") {
        url = "https://www.ourspark.org/api/uploadImg";
    }
    editor.customConfig.uploadImgServer = url; // 上传图片到服务器
    editor.customConfig.zIndex = 0;
    editor.create();
    editor.txt.html("答案字数至少要在30字以上...");
  },
  methods: {
    fontNumLimit(value) {
      var temp = value.replace(/<\/?.+?>/g, "");
      var result = temp.replace(/ /g, "");//result为获取冲文字得到后的内容
      //         获取img标签
      var re = /<img[^>]+>/g;
      var ImgA = value.match(re);
      let imgLen;
      if(ImgA){
        imgLen = ImgA.length
      }
      if(!ImgA){
        imgLen = 0
      }
      let spanInfo = imgLen + result.length;
      if(spanInfo >= 30){
        return true;
      } else {
        return false;
      }
    },
    submitAnswer() {
      if(!this.fontNumLimit(this.editorContent)){
        this.$Message.error('答案字数至少要在30字以上');
        return
      }
      if(this.done) {
        this.$Message.error('不可重复提交答案');
        return
      }
      this.done = true;
      
    }
  }
}
</script>